<pro-header></pro-header>
<nz-card>
    <form nz-form [formGroup]="roleForm">
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="7">
                <label nz-form-item-required>角色名称</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="12" nzHasFeedback>
                <input nz-input type="text" formControlName="nickName">
                <div nz-form-explain
                     *ngIf="roleForm.get('nickName').dirty&&roleForm.get('nickName').errors">
                    <ng-container
                        *ngIf="roleForm.get('nickName').hasError('required') || roleForm.get('nickName').hasError('empty') ">
                        请输入角色名称
                    </ng-container>
                    <ng-container *ngIf="roleForm.get('nickName').hasError('maxlength')">
                        角色名称不能超过6个字
                    </ng-container>
                </div>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="7" nzRequired>
                <label nz-form-item-required>角色权限</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="12">
                <input type="hidden" formGroupName="resId">
                <nz-transfer
                    [nzDataSource]="idOfRes"
                    [nzTitles]="['','']"
                    (nzSelectChange)="select($event)"
                    (nzChange)="change($event)">
                </nz-transfer>
            </div>
        </div>
        <div nz-row nzType="flex" nzJustify="center">
            <button nz-button nzType="primary" style="margin-right: 8px;" nz-col nzSpan="4" (click)="submit()"
                    [disabled]="!roleForm.valid">提交
            </button>
        </div>
    </form>
</nz-card>
